<!doctype html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>基础参数设置</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="stylesheet" href="/static/css/font.css">
    <link rel="stylesheet" href="/static/css/xadmin.css">
    <link rel="stylesheet" href="/static/lib/layui/css/layui.css">
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        /*
        KISSY CSS Reset
        理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。
        2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。
        3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。
        特色：1. 适应中文；2. 基于最新主流浏览器。
        维护：玉伯<lifesinger@gmail.com>, 正淳<ragecarrier@gmail.com>
         */

        /** 清除内外边距 **/
        body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
        dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
        pre, /* text formatting elements 文本格式元素 */
        form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
        th, td /* table elements 表格元素 */
        {
            margin: 0;
            padding: 0;
        }

        /** 设置默认字体 **/
        body,
        button, input, select, textarea /* for ie */
        {
            font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
        }

        h1, h2, h3, h4, h5, h6 {
            font-size: 100%;
        }
        .pading-1{
            padding-left: 20px;
        }
        .pading-2{
            padding-left: 30px;
        }
        .pading-3{
            padding-left: 40px;
        }
        .pading-4{
            padding-left: 50px;
        }
        .content{
            margin: 30px 0 0 30px;
            display: flex;
            flex-direction: row;
        }
        .content .content-left{
            margin-right: 40px;
        }
        .content .cotent-right{
            border-left:  2px dotted #8B8682;
            padding-left: 20px;
        }
        .select{
            width: 200px;
            height: 30px;
            border: none;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="content-left" id="tree">
        </div>
        <div class="cotent-right">
            <form class="" action="/dict/insert">
                <table>
                    <tr>
                        <td>
                            <div class="layui-form-item">
                                <label class="layui-form-label">父级名称：</label>
                                <div class="layui-input-block">
                                    <select name="parentid" lay-verify="required" class="select">
                                        <option value="">----选择父级名称-----</option>
                                        <option th:text="${dict.name}" th:value="${dict.id}" th:each="dict:${dictList}"></option>
                                    </select>
                                </div>
                            </div>
                        </td>
                        <td>
                            <div class="layui-form-item">
                                <label class="layui-form-label">名称:</label>
                                <div class="layui-input-block">
                                    <input type="text" name="name" required  lay-verify="required" placeholder="请输入名字" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="layui-form-item layui-form-text">
                                <label class="layui-form-label">编码:</label>
                                <div class="layui-input-block">
                                    <input type="text" name="cord" required  lay-verify="required" placeholder="请输入编码" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </td>
                        <td>
                            <div class="layui-form-item layui-form-text">
                                <label class="layui-form-label">类型:</label>
                                <div class="layui-input-block">
                                    <input type="text" name="type" required  lay-verify="required" placeholder="请输入类型" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td rowspan="2">
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit lay-filter="formDemo">添加数据</button>
                                </div>
                            </div>
                        </td>
                    </tr>
                </table>
            </form>
            <iframe th:src="@{'/dict/table'}" width="100%" height="100%" frameborder="no" scrolling="no"></iframe>
        </div>
    </div>

    <script src="/static/lib/layui/layui.js"></script>
    <script  type="text/javascript" th:inline="javascript">
        var dictTree = [[${dictTree}]]
        //Demo
        layui.use(['form','jquery','tree'], function(){
            var $ = layui.jquery,
                form = layui.form,
                tree = layui.tree;
            form.render();

            //渲染
            var inst1 = tree.render({
                elem: '#tree'  //绑定元素
                ,data: dictTree
                ,click:function(obj){
                    //跳转table：iframe
                    $('iframe').attr('src','/dict/tableTree' + '?id='+obj.data.id+"&time=" + Math.random());
                }
            });

        });
    </script>

</body>
</html>